<template>
  
    <orh-trees :treesHead="treesHead"
        :reload="formValidate.grade_id!=null" @on-reload="refresh"
        >
        <Tree slot="trees" :data="trees" @on-select-change="getNodes"></Tree>
        <orh-sub-table slot="content" id="qqq">
            <Table :columns="columns1" :data="datas" :loading="tableload" slot="table"></Table>
        </orh-sub-table>  
     
        <Modal v-model="modal" title="选择教师" width="350" slot="others">
            <teacher v-if="modal" @on-select="peoplebutton"></teacher>
        </Modal>
        <orh-sidebar v-model="show" :title="pageTitle" cover slot="others">
          <component :is="'AssignClassTeacherRecord'" :infoId="infoId"></component>
        </orh-sidebar>
    </orh-trees>
</template>
<script>   
  export default {
    components: {
        AssignClassTeacherRecord: resolve => {require(['./AssignClassTeacherRecord.vue'], resolve);},
 	    OrhTrees: resolve=> {require(['./AssignClassTeacherTrees.vue'],resolve);},	
        Teacher: resolve=> require(['&/Authpub/teacher.vue'],resolve),
      
    },
    data () {
      return {
            modal:false,
            teacherindex:null,
            teacher_name:[],
            addsub:[],
            
            show: false,
            pageTitle:null,//右边页面的title
            tableload:false,//表格加载动画
            // 菜单树
            trees: [],
            listUrl:null,
           
            treesHead: {
              title: '年级菜单',
              button: false,
              button_text: '添加按钮'
            },
            // 创建
            form: [],
            formValidate:{
                items:[],//班级id  和班主任id   开始时间，结束时间
                grade_id:null,//年级id
            },
            infoId: null,//用于向修改页面传id值
            listDictionary:[],//异动状态数据
            datasOld:[],
            datas:[],
                
            columns1:[
                {
                    title: '班级',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', params.row.eclass_name);
                    },
                    width:80,
                },
                {
                    title: '班主任',
                    align: 'center',
                    width: 300,

                    render: (h, params) => {

                        return h('div',[
                            
                            h('Input',{
                                props:{
                                    type:'text',
                                    value:params.row.teacher_name==null ? '' : params.row.teacher_name.zh,//此处如何让数据双向绑定,
                                    readonly:true
                                },
                                style:{
                                    width:'50%'
                                },
                                on:{
                                    'on-change':(event) => {}
                                }
                            }),

                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value:'fenpeiadd',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginLeft: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.modal=true
                                        this.teacherindex=params.index
                                    }
                                }
                            }, '选择教师')

                        ]);
                    }
                },
                {
                    title: '异动状态',
                    align: 'center',
                    width:150,
                    render: (h, params) => {
                        let ss=[]
                        this.listDictionary.class_director_change.forEach((item)=>{
                            ss.push(h('Option', {
                                props: {
                                    value:item.dictionary_id,
                                }
                            },item.dictionary_name.zh))
                        })
                        return h('Select',{
                            style: {
                                width: '100px',
                            },
                            props:{
                                disabled:this.datasOld[params.index].teacher==null ? true : false,
                                value:this.form[params.index].transaction//默认选中第一个（v-model）
                            },
                            on:{
                                'on-change':(value) => {
                                    this.form[params.index].transaction=value
                                    
                                },
                            }
                        },ss);
                    },
                },
                {
                    title: '原因',
                    align: 'center',
                    width:300,
                    render: (h, params) => {
                        return h('Input',{
                            props:{
                                type:'text',
                                value:this.form[params.index].reason.zh,//此处如何让数据双向绑定
                                disabled:this.datasOld[params.index].teacher==null ? true : false
                            },
                            on:{
                                'on-change':(event) => {
                                    this.form[params.index].reason.zh=event.target.value
                                    this.form[params.index].reason.en=''
                                    this.form[params.index].reason.mn=''
                                }
                            }
                        })
                    }
                    
                },
                {
                    title: ' ',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                            directives: [
                                {
                                name: 'button',
                                value: 'fenpeiadd',
                                }
                            ],
                            props: {
                                type: 'primary',
                                size: 'small',
                                disabled:(this.form[params.index].teacher_id!=null && this.form[params.index].transaction!=null && this.form[params.index].reason.zh!=='' && this.addsub[params.index]!=undefined) || (this.datasOld[params.index].teacher==null && this.addsub[params.index]!=null) ? false : true
                            },
                            style: {
                                marginRight: '5px',
                            },
                            on: {
                                click: () => {
                                    this.submit(this.form[params.index])
                                }
                            }
                            }, '保存'),
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.Record(this.datas[params.index].eclass_id)
                                    }
                                }
                            }, '查看记录'),
                        ]);
                    }
                }
            ],
        }
    },
    methods: {
        /************************************************************
         * 
         * 请求年级数据
         * 
         ************************************************************/
        load() {
            this.$http.get('api/base/v1/get/grade/list')
            .then(val=>{   
                this.trees = this.process(val.data)                  
            })
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        
        /************************************************************
         * 
         * 处理数据
         * 
         ************************************************************/
        process(data) {
            let arr = data.map(item => {
                item.title = item.grade_name.zh?item.grade_name.zh:item.grade_name.mn
                item.value = item.id
                return item
            })
            return arr
        },

        /************************************************************
         * 
         * 点击年级获取班级数据
         * 
         ************************************************************/
        getNodes(item) {
            this.listUrl='api/eclass/v1/eclass/grade_eclass?grade_id='
            this.queryData(item[0].id)             
        },
        
        /************************************************************
         * 
         * 获取班级数据
         * 
         ************************************************************/
        queryData(grade_id=this.formValidate.grade_id){
            this.tableload=true
            this.addsub=[]
            this.formValidate.grade_id=grade_id
            this.$http.get(`${this.listUrl}${grade_id}`)
            .then(val=>{
                this.datasOld=val.data
                this.datas = val.data.map(el => {
                    let obj = {
                        eclass_id: parseInt(el.eclass_id),
                        teacher_id: el.teacher !== null?parseInt(el.teacher.teacher_id):'',
                        teacher_name: el.teacher ? el.teacher.headteacher.teacher_name.zh : '',
                        eclass_name: el.eclass_name.zh
                    }
                    return obj
                })
                this.form = val.data.map(el => {
                    let obj = {
                        eclass_id: parseInt(el.eclass_id),
                        teacher_id: el.teacher !== null?parseInt(el.teacher.teacher_id):'',
                        reason:{//姓名
                            zh:'',
                            mn:'',
                            en:'',                   
                        },
                        transaction:null,
                    }
                    return obj
                })
                this.tableload=false
            }) 
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload=false
            })
        }, 

        /************************************************************
         * 
         * 点击人员
         * 
         ************************************************************/
        peoplebutton(id) {
            this.tableload=true
            this.modal=false
            this.$http.get('api/teacher/v1/get/teacher/listname')
            .then(val=>{ 
                let teacherall=val.data
                let teacherfind=teacherall.filter(item => item.user_id == id)
                if(teacherfind.length!=0){
                    this.form[this.teacherindex].teacher_id=id
                    this.addsub[this.teacherindex]=id
                    this.datas[this.teacherindex].teacher_name=teacherfind[0].teacher_name.zh
                }
                this.tableload=false
            })    
            .catch(err=>{
               
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload=false
            }) 
        },

        /************************************************************
         * 
         * 点击保存
         * 
         ************************************************************/
        submit(form){
            this.tableload=true
            this.formValidate.items[0]=form
            this.$http.post('api/teacher/v1/headteacher/record',this.formValidate)
            .then(val=>{ 
                this.listUrl='api/eclass/v1/eclass/grade_eclass?grade_id='
                this.queryData(this.formValidate.grade_id)  
                this.$Message.success(val.message);
            })
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload=false
            })
        }, 

        /************************************************************
         * 
         * 点击查看记录
         * 
         ************************************************************/
        Record(index){
            this.pageTitle = '查看记录'
            this.infoId = index
            this.show = true
        },
        refresh(){
            this.queryData()
        }  
    },
    mounted(){
        this.load() 
        /************************************************************
         * 
         * 异动类型数据
         * 
         ************************************************************/
        this.$http.get('api/dictionary/v1/dictionary/pidquerys?class_director_change')
        .then(val=>{ 
            this.listDictionary=val.data
        })  
        .catch(err=>{
            if(err.code && err.code==422) {
                this.$Message.error(err.message);
            }
        })
    }
  }
</script>
<style  lang="less">
    #qqq{
        .content{
            bottom:0px;
        }
    }

</style>

